<template>
    <div ref="pieRef" class="pie">

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs, watch } from 'vue'
import * as echarts from 'echarts';
type EChartsOption = echarts.EChartsOption;
const pieRef = ref<HTMLDivElement | null>(null);

interface Iprop {
    data: SalePie[];
    [index: string]: any;
}

// 定义props接收父传子的数据
const props = defineProps<Iprop>()
let pie: echarts.ECharts;
onMounted(() => {
    if (!pieRef.value) return;
    pie = echarts.init(pieRef.value)
})
const { data } = toRefs(props)
watch(data, () => {
    // 把data进行处理，要求满足 echarts 的 series 的data
    // 该data要求： {name,value}
    let d = data.value as any as SalePie[];
    // 下面这个option需要我们自己看文档一个一个调整，比较麻烦
    // 志xiong brother 建议简单点：
    // 1. github colpilot , 一个月10美刀
    // 2. geeker 免费，但是比较智障
    // 3. chatgpt
    let option: EChartsOption = {
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        title: {
            text: '饼图示例',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                data: [
                    { value: 335, name: '直接访问' },
                    { value: 310, name: '邮件营销' },
                    { value: 234, name: '联盟广告' },
                    { value: 135, name: '视频广告' },
                    { value: 1548, name: '搜索引擎' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    pie.setOption(option);
})

</script>

<style lang="less" scoped>
.pie {
    width: 100%;
    height: 400px;
}
</style>